<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="//ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat">
    <style type="text/css">
        body {
            font: 20px "Montserrat", sans-serif;
            line-height: 1.8;
            color: #f5f6f7;
        }
        p {
            font-size: 16px;
        }
        .bg-1 {
            background-color: #1abc9c; /* Green */
            color: #fff;
        }
        .bg-2 {
            background-color: #474e5d; /* Dark Blue */
            color: #fff;
        }
        .bg-3 {
            background-color: #fff; /* White */
            color: #555;
        }
        .bg-4 {
            background-color: #2f2f2f;
            color: #fff;
        }
        .container-fluid {
            padding: 70px 0;
        }
        .navbar {
            padding: 15px 0;
            border: 0;
            border-radius: 0;
            margin-bottom: 0;
            font-size: 12px;
            letter-spacing: 5px;
        }
        .navbar-nav li a:hover {
            color: #1abc9c !important;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:;">Me</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="javascript:;">WHO</a></li>
                    <li><a href="javascript:;">WHAT</a></li>
                    <li><a href="javascript:;">WHERE</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid bg-1 text-center">
        <h3>Who Am I?</h3>
        <!-- Add display:inline to the first image to force it to be centered (the .img-responsive class adds display:block to the image, which makes it jump to the left of the screen). -->
        <img class="img-circle img-responsive" style="display: inline;" src="http://w3schools.bootcss.com/bootstrap/bird.jpg" alt="Bird">
        <h3>I'm an adventurer</h3>
    </div>

    <div class="container-fluid bg-2 text-center">
        <h3>What Am I?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        <a class="btn btn-default btn-lg" href="javascript:;"><span class="glyphicon glyphicon-search"></span> Search</a>
    </div>

    <div class="container-fluid bg-3 text-center">
        <h3>Where To Find Me?</h3>
        <div class="row">
            <div class="col-sm-4">
                <p>Lorem ipsum...</p>
                <!-- If you want the image to span the entire width of the screen when it starts to stack, add width:100% to the image. -->
                <img class="img-responsive" style="width: 100%" src="http://w3schools.bootcss.com/bootstrap/birds1.jpg" alt="Image">
            </div>
            <div class="col-sm-4">
                <p>Lorem ipsum...</p>
                <img class="img-responsive" style="width: 100%" src="http://w3schools.bootcss.com/bootstrap/birds2.jpg" alt="Image">
            </div>
            <div class="col-sm-4">
                <p>Lorem ipsum...</p>
                <img class="img-responsive" style="width: 100%" src="http://w3schools.bootcss.com/bootstrap/birds3.jpg" alt="Image">
            </div>
        </div>
    </div>

    <footer class="container-fluid bg-4 text-center">
        <p>Bootstrap Theme Made By <a href="//zhanglianxin.github.io">zhanglianxin</a></p>
    </footer>
</body>
</html>
